<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="form"
				:inline="true"
				:model="queryData"
				label-width="100px"
			>
				<el-form-item label="日期" prop="startEndTime">
					<el-date-picker
						v-model="queryData.startEndTime"
						format="yyyy-MM-dd"
						type="daterange"
						range-separator="-"
						:start-placeholder="$t('common.start_date')"
						:end-placeholder="$t('common.end_date')"
						style="width: 375px"
						:picker-options="pickerShortcut3"
						:default-time="defaultTime"
						:clearable="false"
					></el-date-picker>
				</el-form-item>

				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						:loading="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('90150030')"
						type="warning"
						size="medium"
						icon="el-icon-download"
						:disabled="exportloading"
						:loading="exportloading"
						@click="handleExport"
					>
						{{ $t('dxn.card_ables_list.export_excel') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				ref="tableList"
				:data="dataList"
				style="width: 100%"
				:max-height="tableHeight"
				show-summary
				:summary-method="(val) => handleRow(val, totalSummary)"
				highlight-current-row
			>
				<el-table-column
					label="项目"
					min-width="180"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span style="color:#1890ff">
							{{ scope.row.itemName || '-' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					label="投注人数"
					min-width="180"
					align="center"
					sortable
					prop="betNumber"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ handleNumber('', scope.row.betNumber, 0) }}
					</template>
				</el-table-column>
				<el-table-column
					label="注单量"
					min-width="100"
					align="center"
					sortable
					prop="placeOrderQuantity"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ handleNumber('', scope.row.placeOrderQuantity, 0) }}
					</template>
				</el-table-column>
				<el-table-column
					label="投注金额"
					min-width="120"
					align="center"
					sortable
					prop="betAmount"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.betAmount
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					label="有效投注"
					min-width="120"
					align="center"
					sortable
					prop="validBetAmount"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.validBetAmount
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					label="平台收益"
					min-width="120"
					align="center"
					sortable
					prop="netAmount"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span :style="handleNumberColor(scope.row.netAmount)">
							{{
								handleNumber(
									scope.row.currency,
									scope.row.netAmount
								)
							}}
						</span>
					</template>
				</el-table-column>
			</el-table>
		</template>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import dayjs from 'dayjs'
import summaryList from './components/summaryList'
import MainContent from '@/components/MainContent/index.vue'
const start = () => dayjs().startOf('day')
const end = () => dayjs().endOf('day')
export default {
	name: routerNames.profitAndLossShow,
	components: {
		MainContent
	},
	mixins: [list, summaryList],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			loading: false,
			exportloading: false,
			total: 0,
			dataList: [],
			totalSummary: [],
			queryData: {
				startEndTime: [start(), end()]
			},
			params: {
				id: null,
				profitStartTime: null,
				profitEndTime: null
			}
		}
	},
	methods: {
		loadData() {
			this.loading = true
			this.dataList = []
			this.totalSummary = []
			this.$refs.tableList.clearSort()
			const params = this.formatParams()
			this.$api
				.getReportProfitAndLossBend(params)
				.then((res) => {
					if (res?.code === 200) {
						this.dataList = res?.data || []
						const len = this.dataList.length
						if (len > 0) {
							this.totalSummary = this.dataList[len - 1]
							this.dataList.pop()
						}
					}
				})
				.catch(() => {})
				.finally(() => {
					this.loading = false
				})
		},
		formatParams() {
			const [startTime, endTime] = this.queryData.startEndTime || []
			const params = {
				profitStartTime: startTime
					? dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				profitEndTime: endTime
					? dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				...this.queryData
			}
			delete params.startEndTime
			return params
		},
		// getSummaries(param) {
		// 	const { columns, data } = param
		// 	const sums = []
		// 	columns.forEach((column, index) => {
		// 		if (index === 0) {
		// 			sums[index] = '全部合计'
		// 			return
		// 		}
		// 		const values = data.map((item) => Number(item[column.property]))
		// 		if (!values.every((value) => isNaN(value))) {
		// 			sums[index] = values.reduce((prev, curr) => {
		// 				const value = Number(curr)
		// 				if (!isNaN(value)) {
		// 					return prev + curr
		// 				} else {
		// 					return prev
		// 				}
		// 			}, 0)
		// 		} else {
		// 			sums[index] = undefined
		// 		}
		// 	})
		// 	// 3,4,5需要金额处理
		// 	for (let i = 0; i < sums.length; i++) {
		// 		if (sums[i]) {
		// 			if ([3, 4].indexOf(i) > -1) {
		// 				sums[i] = this.handleNumber(undefined, sums[i])
		// 			}
		// 			if (i === 5) {
		// 				sums[i] = (
		// 					<span style={this.handleNumberColor(sums[i])}>
		// 						{this.handleNumber(undefined, sums[i])}
		// 					</span>
		// 				)
		// 			}
		// 		}
		// 	}
		// 	return sums
		// },
		search() {
			this.pageNum = 1
			this.loadData()
		},
		reset() {
			this.pageNum = 1
			this.queryData.startEndTime = [start(), end()]
			this.$refs.form.resetFields()
			this.loadData()
		},
		// 列表导出
		async handleExport() {
			this.exportloading = true
			const params = this.formatParams()
			this.exportExcelPublic({
				api: 'getReportProfitAndLossExportBend',
				params
			})
				.catch(() => {})
				.finally(() => {
					this.exportloading = false
				})
		}
	}
}
</script>
